// 凹凸图组件 - 继承自基础图表组件
import BaseLineChartComponent from "./base-line-chart.js";

class BumpChartComponent extends BaseLineChartComponent {
    constructor() {
        super();
        // 凹凸图特有属性
        this.bumpConfig = {
            fillOpacity: 0.7,
            lineSmooth: true,
            stackMode: 'none'
        };
    }

    // 重写：监听的属性列表，只包含凹凸图需要的属性
    static get observedAttributes() {
        // 获取父类的观察属性并添加新的属性
        const parentAttributes = super.observedAttributes;
        return [
            ...parentAttributes,
        ];
    }

    // 重写：默认配置，适配凹凸图
    getDefaultConfig() {
        const parentConfig = super.getDefaultConfig();
        // 添加背景色相关配置
        parentConfig.seriesAttrs.push(
            ['bar-background-color_colorpicker', 'rgba(200, 200, 200, 0.3)'],
            ['bar-background-opacity_number', 0.3],
            ['bar-background-max_value', '5000'],
            ['bar-background-radius_number', 4]
        );

        return parentConfig;
    }

    // 重写：生成凹凸图特有的系列数据
    generateSeries(dataDemo, seriesConfig) {
        const defaultGradients = this.getDefaultGradients();
        const seriesList = [];

        // 遍历数据生成系列配置
        dataDemo.forEach((item, index) => {
            const gradientIndex = index % defaultGradients.length;
            const defaultGradient = defaultGradients[gradientIndex];

            const name = Object.keys(item)[0];
            const dataList = item[name].map(item => item.value);
            const gradientColor = seriesConfig.fill ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: seriesConfig.lineColor || defaultGradient.start },
                { offset: 1, color: this.getTransparentColor(seriesConfig.lineColor || defaultGradient.start, seriesConfig.fillOpacity || 0.2) }
            ]) : undefined;

            // 构建系列配置
            const series = {
                name,
                symbolSize: 20,
                type: 'line',
                smooth: seriesConfig.smooth || true,
                emphasis: {
                    focus: 'series',
                    scale: true
                },
                endLabel: {
                    show: true,
                    formatter: '{a}',
                    distance: 20
                },
                lineStyle: {
                    width: seriesConfig.lineWidth || 4,
                    color: seriesConfig.lineColor || defaultGradient.start,
                    // 移除阴影配置
                },
                // 仅在需要填充时添加面积样式
                ...(seriesConfig.fill ? {
                    areaStyle: {
                        color: gradientColor,
                        opacity: seriesConfig.fillOpacity || 0.7
                    }
                } : {}),
                data: dataList,
                itemStyle: {
                    color: seriesConfig.lineColor || defaultGradient.start,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                animationDuration: this.bumpConfig.transitionDuration || 1000
            };

            seriesList.push(series);
        });

        return seriesList;
    }

    // 辅助方法：将颜色转换为透明版本
    getTransparentColor(color, opacity = 0.2) {
        if (color.startsWith('#') && color.length === 7) {
            return `${color}${Math.round(opacity * 255).toString(16).padStart(2, '0')}`;
        }
        return color.replace('rgb', 'rgba').replace(')', `, ${opacity})`);
    }

    // 重写：凹凸图默认数据
    getDefaultData() {
        return [
            {
                "产品A": [
                    { "name": "阶段1", "value": 120 },
                    { "name": "阶段2", "value": 180 },
                    { "name": "阶段3", "value": 150 },
                    { "name": "阶段4", "value": 240 },
                    { "name": "阶段5", "value": 200 },
                    { "name": "阶段6", "value": 300 }
                ]
            },
            {
                "产品B": [
                    { "name": "阶段1", "value": 90 },
                    { "name": "阶段2", "value": 150 },
                    { "name": "阶段3", "value": 200 },
                    { "name": "阶段4", "value": 180 },
                    { "name": "阶段5", "value": 250 },
                    { "name": "阶段6", "value": 220 }
                ]
            },
            {
                "产品C": [
                    { "name": "阶段1", "value": 150 },
                    { "name": "阶段2", "value": 120 },
                    { "name": "阶段3", "value": 160 },
                    { "name": "阶段4", "value": 210 },
                    { "name": "阶段5", "value": 190 },
                    { "name": "阶段6", "value": 280 }
                ]
            }
        ];
    }

    // 重写：处理属性变化，增加凹凸图特有属性处理
    handleAttributeChange(name, value, currentOptions) {
        // 先调用父类方法处理通用属性
        super.handleAttributeChange(name, value, currentOptions);

        // 处理凹凸图特有属性
        let updatedOptions;
        switch (name) {
            case 'bump-highlight_radio':
                this.bumpConfig.highlight = value === 'true';
                updatedOptions = this.updateBumpHighlight(this.bumpConfig.highlight, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'bump-highlight-color_colorpicker':
                this.bumpConfig.highlightColor = value;
                if (this.bumpConfig.highlight) {
                    updatedOptions = this.updateBumpHighlight(true, currentOptions);
                    this.chart.setOption(updatedOptions);
                }
                break;
            case 'bump-transition_duration_number':
                this.bumpConfig.transitionDuration = parseInt(value);
                updatedOptions = {
                    series: currentOptions.series.map(series => ({
                        ...series,
                        animationDuration: this.bumpConfig.transitionDuration
                    }))
                };
                this.chart.setOption(updatedOptions);
                break;
            case 'series-fill_radio':
                updatedOptions = this.updateFillStyle(value === 'true', currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-fill-opacity_slider':
                updatedOptions = this.updateFillOpacity(parseFloat(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
        }
    }

    // 凹凸图特有方法：更新填充样式
    updateFillStyle(showFill, currentOptions) {
        return {
            series: currentOptions.series.map(series => ({
                ...series,
                areaStyle: showFill ? series.areaStyle : undefined
            }))
        };
    }

    // 凹凸图特有方法：更新填充透明度
    updateFillOpacity(opacity, currentOptions) {
        return {
            series: currentOptions.series.map(series => ({
                ...series,
                areaStyle: series.areaStyle ? {
                    ...series.areaStyle,
                    opacity: opacity
                } : undefined
            }))
        };
    }

    // 凹凸图特有方法：更新高亮效果
    updateBumpHighlight(highlight, currentOptions) {
        return {
            series: currentOptions.series.map(series => ({
                ...series,
                emphasis: {
                    ...series.emphasis,
                    disabled: !highlight,
                    itemStyle: highlight ? {
                        ...series.itemStyle,
                        shadowBlur: 10,
                        shadowColor: this.bumpConfig.highlightColor || 'rgba(255, 255, 255, 0.8)'
                    } : series.itemStyle
                }
            }))
        };
    }
}

// 注册自定义元素
customElements.define('bump-chart-component', BumpChartComponent);
